<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const router = useRouter()
const list = ref([{
  name: '项目A',
  tag: '新客专享',
  interestRate: '12-24',
  Interest: '0'
}, {
  name: '项目B',
  tag: '新客专享',
  interestRate: '12-24',
  Interest: '0'
}, {
  name: '项目C',
  tag: '新客专享',
  interestRate: '12-24',
  Interest: '0'
}, {
  name: '项目F',
  tag: '新客专享',
  interestRate: '12-24',
  Interest: '0'
}])

const toDetail = () => {
  router.push({ path: '/detail' })
} 
</script>
<template>
  <div class="container">
    <div class="body w-100% p-15">
      <div class="body_top font-source text-[#fff] mb-10 flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 40 40" fill="none">
          <path
            d="M13.125 38C10.75 33 12 30.125 13.875 27.5C15.875 24.5 16.375 21.625 16.375 21.625C16.375 21.625 18 23.625 17.375 26.875C20.125 23.75 20.625 18.75 20.25 16.875C26.5 21.25 29.25 30.875 25.625 37.875C44.875 26.875 30.375 10.5 27.875 8.75C28.75 10.625 28.875 13.75 27.125 15.25C24.25 4.25 17.125 2.125 17.125 2.125C18 7.75 14.125 13.875 10.375 18.5C10.25 16.25 10.125 14.75 8.87502 12.5C8.62502 16.625 5.50002 19.875 4.62502 24C3.50002 29.625 5.50002 33.625 13.125 38Z"
            fill="#EA473D" />
        </svg>
        <div class="title text-[18px] ml-5">{{ t('project') }}</div>
      </div>
      <div class="flex flex-col gap-10">
        <div class="p-15 w-100% rounded-[15px] item" v-for="(item, index) in list" :key="index"
          @click="() => toDetail()">
          <div class="flex items-center mb-13">
            <div class="font-microsoft text-[14px] text-[#fff]">{{ item.name }}</div>
            <div class="ml-16 tag text-[#DEECFF]">{{ t('project_newCustomer') }}</div>
          </div>
          <div class="flex items-center gap-75">
            <div class="">
              <div class="text-[#00C8FF] text-[24px] font-inter mb-6 font-700">{{ item.interestRate }}%</div>
              <div class="text-[#A2B0C3] text-[14px]">{{ t('project_annual') }}</div>
            </div>
            <div class="">
              <div class="text-[#fff] text-[20px] font-inter mb-6 font-700">{{ item.Interest }}%</div>
              <div class="text-[#A2B0C3] text-[14px]">{{ t('project_interest') }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;

  .body {
    min-height: calc(100vh - var(--van-nav-bar-height));
    background: url('@/static/imgs/lending/bg.png') no-repeat;
    background-size: 100% 100%;
    // padding: 20px 15px;
  }
}

.item {
  background: rgba(255, 255, 255, 0.10);
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.05);
}

.tag {
  padding: 3px 4px;
  border-radius: 2px;
  background: var(--1, linear-gradient(90deg, #1675FD 0%, #2FC4FF 100.27%));
}
</style>